<script lang="ts" setup>
import Header from './components/header.vue';
import Footer from './components/footer.vue';
import Content from './components/content.vue';

import useExpand from './components/hooks/useExpand';
import useContent from './components/hooks/useContent';

const { isExpand, isLineBreak, onChangeLineBreak, onShowExpand, onUploadFn, onCameraFn, onSendLocationFn, onSendMessage } =
  useExpand();
// const { chartInfoList, imageList, onChangeImagePreview, onShowImagePreview } = useContent();x
const footerProps = { isExpand, onShowExpand, onUploadFn, onCameraFn, onSendLocationFn, onSendMessage };
</script>

<template>
  <div class="main">
    <Header />
    <Content v-bind="useContent()" :isExpand="isExpand" :isLineBreak="isLineBreak" />
    <Footer v-bind="footerProps" :onChangeLineBreak="onChangeLineBreak" />
  </div>
</template>

<style scoped lang="less">
.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.background {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F25%2F20200425212120_fQadw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716203201&t=43040c77c7ecc8f1d4e58a700213fe19');
  background-position: fixed;
  background-size: cover;
}
</style>
